.color {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  .left {
    &__container {
      height: 100%;
      width: 16%;
      box-shadow: -5px 0px 11px 0px rgba(0, 0, 0, 0.25);
    }
    &__scroll-view {
      height: 100%;
    }
    &__content {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30rpx 0rpx;
    }
    &__item {
      position: relative;
      width: 60rpx;
      height: 60rpx;
      margin: 0rpx 20rpx;
      margin-top: 36rpx;
      border-radius: 50%;
      animation: leftItemEnterAnimation 0.1s ease-out 1 forwards;
      transform: translateX(-200%);
      color: #FFFFFF;
      &:first-child {
        margin-top: 0px;
      }

      &.active {
        &::after {
          content: ' ';
          position: absolute;
          width: 50%;
          height: 6rpx;
          border-radius: 4rpx;
          background-color: inherit;
          bottom: -18rpx;
          left: 50%;
          transform: scaleY(1) translateX(-50%);
        }
      }
    }
  }

  .right {
    &__container {
      flex: 1;
      width: 100%;
      height: 100%;
    }
    &__scroll-view {
      height: 100%;
    }
    &__item {
      margin: 30rpx;
      
      &__title {
        font-size: 46rpx;
        font-weight: 400;
        &--sub {
          margin-top: 30rpx;
          font-size: 40rpx;
          +.right__item__content {
            margin-top: 10rpx;
          }
        }
      }
      &__content {
        border-radius: 10rpx;
        padding: 34rpx 30rpx;
        margin-top: 40rpx;

        .name {
          position: relative;
          color: #FFFFFF;
          font-size: 38rpx;
          font-weight: 300;
        }
        .value {
          position: relative;
          font-size: 22rpx;
          color: #E6E6E6;
          margin-top: 4rpx;
        }
        &.inherit {
          .name, .value {
            color: inherit;
          }
        }
      }
    }
  }
}

@keyframes leftItemEnterAnimation {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}